<template>
  <div>
    <dialog-edit :footerVisible="false" :visible.sync="dialogVisible" :title="'权限'" :editModel="editModel" :api="api" :form="form"
      :width="'40%'" @onSave="onSave">
      <el-row :gutter="10">
        <el-col :xs="20" :sm="20" :md="20" :lg="20" >
          <el-form-item label="授权目标" prop="bizTypeName">
            {{bizTypeName}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :xs="20" :sm="20" :md="20" :lg="20" >
          <el-form-item label="权限设置" prop="name" >
            <el-radio v-model="radio"  label="2" >自定义</el-radio>
            <el-radio v-model="radio" label="1">公开</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <dym-form v-show="radio === '2'" :editModel="editModel" :componentList="componentList"  :formValue.sync="form">
      </dym-form>
       <template slot="footerBtn">
        <div style="text-align: center;">
          <el-button type="primary" style="float: center;"   @click="submit">保存</el-button>
          <el-button style="float: center;"   @click="dialogVisible = false">取消</el-button>
        </div>
      </template>
    </dialog-edit>
  </div>
</template>

<script>
  import BaseDialog from '@/pages/BaseDialog'
  import DialogEdit from '@/components/dialog/DialogEdit'
  import dymForm from '@/components/element/dymForm'
  import { folderFilePermissionApi } from '@/api/business/businessApi'
  export default {
    extends: new BaseDialog(),
    components: {
      DialogEdit,
      dymForm
    },
    props: {
      // 业务数据的id
      id: {
        type: String,
        default: '1234'
      },
      // 业务类型
      bizType: {
        type: String,
        default: 'B1'
      },
      // 业务数据名称
      bizTypeName: {
        type: String,
        default: '项目管理体系文件'
      }
    },
    data () {
      return {
        componentList: [
          {
            label: '机构选择',
            prop: 'orgIds', // 表单验证传入的值
            labelWidth: '120px',
            componentName: 'cascaderOrg',
            tagId: '0', // 顶级机构
            cols: [20, 20, 20, 20],
            placeholder: '请输入',
            value: 'orgIds', // 字段显示的值
            multiple: true
          },
          {
            label: '用户选择',
            prop: 'userIds', // 表单验证传入的值
            labelWidth: '120px',
            componentName: 'cascaderOrgUser',
            cols: [20, 20, 20, 20],
            placeholder: '请输入',
            value: 'userIds', // 字段显示的值
            multiple: true
          }
        ],
        formRules: {},
        radio: '2'
      }
    },
    computed: {
    // api () {
    //   return folderFilePermissionApi
    // }
  },
  created () {
    folderFilePermissionApi.getPermission(this.bizType, this.id).then(res => {
      // console.log(res)
      if (res.code === 0) {
        this.form.orgIds = res.data.orgId
        this.form.userIds = res.data.userId
        this.radio = res.data.openTarget
      } else {
        this.error(res.msg)
      }
    })
  },

    methods: {
      submit () {
        let userid = []
        let users = this.form.userIds
        users.map(user => {
          userid.push([user[user.length - 1]])
        })
        let d = {
          bizType: this.bizType,
          docRootId: this.id,
          openTarget: this.radio,
          orgId: this.form.orgIds,
          userId: userid
        }
        // console.log(d)
        folderFilePermissionApi.savePermission(d).then(res => {
          if (res.code === 0) {
            this.dialogVisible = false
            this.success('权限保存成功')
          } else {
            this.error(res.msg)
          }
          // console.log(res)
        })
      }
    }
  }
</script>
<style scoped>
  .privilege {
    text-align: center;
  }
</style>
